<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 19:58:57
-->
<template>
  <div v-show="show" class="region-panel">
    <el-table :data="tableData" @selection-change="selectLayers" :paging="false" ref="layerTable">
      <el-table-column align="center" type="selection" label="全选" />
      <el-table-column align="center" prop="tcmc" label="图层名称" :show-overflow-tooltip="true" width="100px" />
      <el-table-column align="center" prop="qyfl" label="区域分类">
        <template slot-scope="{ row, $index }">
          <el-select
            v-model="tableData[$index].qyfl"
            @change="(val) => changeQyfl(row.tcmc, val)"
            placeholder="请选择类型"
          >
            <el-option v-for="item in qyflOpt" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RegionPanel',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    getTool: {
      type: Function,
      required: true
    },
    fileInfo: Object
  },
  data() {
    return {
      checked: this.layers,
      tableData: [],
      qyflOpt: [
        { value: 3, text: '分区' },
        { value: 4, text: '网格' },
        { value: 5, text: '单元' }
      ]
    };
  },
  watch: {
    show(val) {
      console.log(val);
      if (val) {
        console.log('fileInfo', this.fileInfo);
        this.$nextTick(() => {
          this.loadFileInfo();
        });
      }
    }
  },
  methods: {
    loadFileInfo() {
      this.fileInfo.layerTypes.forEach((item) => {
        this.tableData.push({
          tcmc: item,
          qyfl: 3, // type
          layerData: this.fileInfo.layerData[item]
        });
      });
      this.$refs.layerTable.toggleAllSelection();
    },
    selectLayers(val) {
      this.getTool('RegionTool').changeLayerVisible(val.map((item) => item.tcmc));
    },
    changeQyfl(layer, qyfl) {
      console.log(layer, qyfl);
      this.getTool('RegionTool').changeLayerType([layer], qyfl);
    }
  }
};
</script>

<style scoped>
.region-panel {
  position: fixed;
  top: 50px;
  right: 0;
  width: 300px;
  bottom: 0;
  overflow: auto;
  z-index: 1;
}
</style>
